<template>
	<el-dialog
		id="comDetailDialogDiv"
		:title="dialogTitle"
		:visible.sync="carDialogParams.dialogVisible"
		width="80%"
		@opened="onOpened()"
		:before-close="dialogClose"
		>
		<div style="width: 100%;height: 70vh;overflow-y: auto;">
			<div class="tabPanelDiv">
				<div class="detailLine">
					<div class="detailBlock">
						<div class="detailBlockText">
							<span class="detailBlockTextTitle">车牌号：</span><span class="detailBlockTextDesc">{{carNum}}</span>
						</div>
					</div>
					<div class="detailBlock">
						<div class="detailBlockText">
							<span class="detailBlockTextTitle">绩效等级：</span><span class="detailBlockTextDesc">{{carNum}}</span>
						</div>
					</div>
					<div class="detailBlock">
						<div class="detailBlockText">
							<span class="detailBlockTextTitle" style="width: 6vw;">排污许可证：</span><span class="detailBlockTextDesc" style="width: 12vw;">{{carNum}}</span>
						</div>
					</div>
					<div class="detailBlock">
						<div class="detailBlockText">
							<span class="detailBlockTextTitle">联系人：</span><span class="detailBlockTextDesc">{{carNum}}</span>
						</div>
					</div>
					<div class="detailBlock">
						<div class="detailBlockText">
							<span class="detailBlockTextTitle">联系方式：</span><span class="detailBlockTextDesc">{{carNum}}</span>
						</div>
					</div>
				</div>
				<div class="detailLine">
					<div class="detailBlock">
						<div class="detailBlockText">
							<span class="detailBlockTextTitle">  归属区：</span><span class="detailBlockTextDesc">{{carNum}}</span>
						</div>
					</div>
					<div class="detailBlock">
						<div class="detailBlockText">
							<span class="detailBlockTextTitle">企业地址：</span><span class="detailBlockTextDesc" style="width: 30vw;">{{carNum}}</span>
						</div>
					</div>
				</div>
				<div class="detailLine">
					<div class="detailBlock">
						<el-date-picker
							v-model="subCentusTime"
							type="datetimerange"
							align="right"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							size="mini"
							style="margin-left: 0vw;"
							:default-time="['00:00:00', '23:59:59']">
						</el-date-picker>
						<el-button type="primary" style="margin-left: 1vw;" size="mini" @click="setSubCentusData()">查询</el-button>
					</div>
				</div>
				<div style="width: 100%;height: 58vh;display: flex;flex-direction: column;">
					<el-table v-loading="loading" element-loading-text="数据加载中..." height="100%" :data="dataTableList" style="width: 100%;flex: 1;">
						<el-table-column label="序号" align="center" type="index" width="50px"></el-table-column>
						<el-table-column label="ID" align="center" prop="id" width="50px" v-if="false"></el-table-column>
						<el-table-column label="区域名称" align="center" prop="name"></el-table-column>
						<el-table-column label="所属单位" align="center" prop="company"></el-table-column>
						<el-table-column label="责任人" align="center" prop="principalName"></el-table-column>
						<el-table-column label="责任人电话" align="center" prop="principalPhone"></el-table-column>
						<el-table-column label="说明描述" align="center" prop="memo" width="500px"></el-table-column>
						
					</el-table>
					
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageNum"
						:page-sizes="[5, 10, 25, 50]"
						:page-size="pageSize"
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total"
						style="height: 60px;padding-top: 20px;text-align: right;">
					</el-pagination>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import moment from "moment";
export default {
	
    props: {
		carDialogParams: {
			type: Object,
			default: null
		}
	},
    data() {
        return {
			//企业详情弹窗
			dialogTitle: "企业详情",
			dialogVisible: false,
			carNum: null,
			//车辆通行记录台账
			loading: false,
			total: 0,
			pageNum: 1,
			pageSize: 10,
			dataTableList: [],
			subCentusTime: '',
			
        }
    },
	mounted() {
		window.dialog = this;
	},
    methods:{
		
        onOpened() {
			this.carNum = this.carDialogParams.objRecord.carNum;
			this.dialogTitle = '车辆信息 -- ' + this.carNum;
			this.getCarDetailData();
			//初始化起止时间
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
			this.subCentusTime = [start, end];
			setTimeout(() => {
				this.getList();
			}, 100)
		},
        dialogClose(done) {
        	this.dialogVisible = false;
        	done();
        },
		//获取车辆信息
		getCarDetailData() {
			
		},
		//获取车辆通行记录
        getList() {
        	this.dataTableList = [
        		
        	]
        },
        handleQuery() {
        	this.pageNum = 1;
        	this.getList();
        },
        handleSizeChange(val) {
        	this.pageNum = 1;
        	this.pageSize = val;
        	this.getList();
        },
        handleCurrentChange(val) {
        	this.pageNum = val;
        	this.getList();
        },
    },
};
</script>

<style>
	.tabPanelDiv {
		width: 100%;
		height: 70vh;
		display: flex;
		flex-direction: column;
	}
	.detailLine {
		width: 100%;
		height: 4vh;
		/*
		background-color: #090f1a;
		*/
		display: flex;
	}
	.detailBlock {
		width: auto;
		height: 100%;
		padding-left:0vw;
		display: table;
	}
	.detailBlockText {
		width: auto;
		height: 100%;
		display: table-cell;
		vertical-align: middle;
	}
	.detailBlockTextTitle {
		display: inline-block;
		width: 5vw;
		text-align: right;
		color: #00e5e5;
	}
	.detailBlockTextDesc {
		display: inline-block;
		width: 7vw;
		color: #ffaa00;
	}
	
</style>